import { Image, StyleSheet, Text, TextInput, View } from 'react-native'
import React, { useState } from 'react'
import ZhPage from "./ZhPage";
import UIConstants from '../constants/UIConstants';   //ES6的模块导入语法
let logo = require('../assets/img/logo.png')           //CommonJS模块导入语法
import AntDesign from '@expo/vector-icons/AntDesign';
import Ionicons from '@expo/vector-icons/Ionicons';
import ZhButton from '../components/ZhButton';

export default function ZhLogin() {
  let[phone, setPhone] =useState('')      //使用钩子函数创建 电话号码
  let[pwd, setpwd] =useState('')          //使用钩子函数创建 登录密码
  let[hidePwd, sethidePwd] =useState(true)          //使用钩子函数创建 隐藏密码
    return (
      <ZhPage bgColor={UIConstants.COLOR_WHITE} >
        {/**F1： LOGO图标*/}
        <Image style={ss.logo}  source={logo}/>
        {/**引用网络图片方法：<Image style={{width:300, height:300}} source={{uri:'http://116.62.165.70/HarmonyOS.png'}}/>  */}

        {/**F2： 手机号输入框*/}
          <View style={ss.inputGroup}>
            <AntDesign name="user" size={24} color={UIConstants.COLOR_GREEN} />
            <TextInput placeholder='请输入手机号码' style={ss.input} keyboardType='phone-pad' value={phone} onChangeText={val => setPhone(val)}/>
            {/*短路逻辑，如有一个为真，后面就不需要走了*/}
            {phone!=""  &&  <AntDesign name="closecircle" size={24} color={UIConstants.COLOR_BLUE} onPress={()=>{setPhone('')}}/>} 
          </View>

        {/**F3： 密码输入框组*/}
           <View style={ss.inputGroup}>
            <AntDesign name="lock1" size={24} color={UIConstants.COLOR_GREEN} />
            <TextInput placeholder='请输入手机号码' style={ss.input} keyboardType='default' value={pwd} onChangeText={val => setpwd(val)} secureTextEntry={hidePwd}/>
            <Ionicons name={hidePwd?"eye-off":"eye"} size={24} color={UIConstants.COLOR_GRAY}  onPress={()=>sethidePwd(!hidePwd)}/>
          </View>
        {/**F4： 提交按钮*/}
        <View style={ss.butbox} >
          {/* <ZhButton title='登 录' bgColor='#009'></ZhButton> 根据传过来的bgColor参数可单独修改 */}
          <ZhButton title='登 录' onPress={()=>console.log('999666')}></ZhButton>
        </View>



        {/**F5： 忘记密码链接*/}
        <Text>忘记密码</Text>
      </ZhPage>
    )
}

let  ss =StyleSheet.create({
  logo:{
    marginLeft:"auto",
    marginRight:"auto",
    marginTop:UIConstants.SPACE_COL_XL *3
  },
  inputGroup:{
    backgroundColor:"#F8F8F8",
    //width:"100%",若指定了margin就不能用，否则溢出
    marginHorizontal:UIConstants.SPACE_ROW_XL,
    marginTop:UIConstants.SPACE_COL_LG,
    height:52,
    borderRadius:UIConstants.BORDER_RADIUS_MD,
    flexDirection:'row' ,//改变主轴方向，view默认是弹性容器
    alignItems:"center",//子元素在交叉轴上居中显示
    paddingHorizontal:UIConstants.SPACE_ROW_LG
  },
  input:{
    flex:1,  //弹性容器中的子元素指定自己的“布局权重“
  },
  butbox:{
    paddingHorizontal:UIConstants.SPACE_ROW_LG,
    marginTop:UIConstants.SPACE_COL_SM*2
  }
})
